import { PlusOutlined } from '@ant-design/icons';
import { useQuery } from '@tanstack/react-query';
import { Button, Row, Space } from 'antd';
import type { ColumnType } from 'antd/lib/table';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';

import api from '@/apis/api';
import CustomTable from '@/components/CustomTable';
import LocalInfo from '@/utils/localInfo';

import AddIpAddress from '../components/AddIpAddress';
import DeleteIpAddress from '../components/DeleteIpAddress';
import styles from './styles.module.less';

type TableData = {
  id: number;
  ip: string;
  port: number;
  creater: string;
  time: string;
  remark: string;
};

export default function BlackList() {
  const [recordId, setrecordId] = useState<number>(0);
  const [isaddModalOpen, setIsaddModalOpen] = useState(false);
  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
  // 记录总数
  const [total, setTotal] = useState<number>(0);
  // 记录页码
  const [page, setPage] = useState<number>(1);
  const [pageSize, setPageSize] = useState<number>(10);

  const [WhiteListTable, setWhiteListTable] = useState<TableData[]>([]);

  const columns: (ColumnType<TableData> & { align?: 'left' | 'right' | 'center' })[] = [
    {
      title: 'IP地址',
      dataIndex: 'ip',
      key: 'ip',
      width: '5%',
      align: 'center',
    },
    {
      title: '端口',
      dataIndex: 'port',
      key: 'port',
      width: '5%',
      align: 'center',
      render: (text) => {
        return text === 10890 ? '管理服务' : '算法服务';
      },
    },
    {
      title: '创建人',
      dataIndex: 'creater',
      key: 'creater',
      width: '5%',
      align: 'center',
    },
    {
      title: '创建时间',
      dataIndex: 'time',
      key: 'time',
      width: '5%',
      align: 'center',
      render: (data) => {
        const d = data ? dayjs(data).format('YYYY-MM-DD HH:mm:ss') : '';
        return d;
      },
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      width: '5%',
      align: 'center',
    },
    {
      title: '操作',
      key: 'action',
      render: (record) => {
        const handleClick = () => {
          setIsDeleteModalOpen(true);
          setrecordId(record.id);
        };
        const isDisabled = LocalInfo.getRoleId() === 2;
        const disabledStyle = {
          color: 'rgba(0, 0, 0, 0.25)',
          cursor: 'not-allowed',
          pointerEvents: 'none' as 'none', // 使用类型断言
        };
        return (
          <>
            <Space>
              <a onClick={handleClick} style={isDisabled ? disabledStyle : undefined}>
                删除
              </a>
            </Space>
          </>
        );
      },
      width: '5%',
      align: 'center',
    },
  ];

  const { data: WhiteListData } = useQuery({
    queryKey: ['getWhiteListData', { page, pageSize }],
    queryFn: async () => {
      const res: any = await api.GetWhiteList({
        skip: (page - 1) * pageSize,
        take: pageSize,
      });
      return res.data;
    },
  });

  useEffect(() => {
    if (WhiteListData) {
      setTotal(WhiteListData.total);
      setWhiteListTable(WhiteListData.items);
    }
  }, [WhiteListData]);

  return (
    <>
      <div
        className={styles.Table}
        style={{
          background: '#fff',
          padding: '25px',
          marginBottom: '25px',
        }}
      >
        {/* 按钮 */}
        <Row>
          <div>
            <Button
              type="primary"
              icon={<PlusOutlined />}
              style={{ marginTop: '-8px', marginBottom: '17px', width: '100px' }}
              onClick={() => setIsaddModalOpen(true)}
              disabled={LocalInfo.getRoleId() === 2}
            >
              添加地址
            </Button>
          </div>
        </Row>
        <CustomTable
          total={total}
          page={page}
          pageSize={pageSize}
          setPage={setPage}
          setPageSize={setPageSize}
          dataSource={WhiteListTable}
          columns={columns}
          scroll={{ x: 800, y: 800 }}
          rowClassName={(_record, index) => (index % 2 === 0 ? 'even-row' : 'odd-row')}
          rowKey="id"
        />
        <AddIpAddress
          title="白名单"
          visible={isaddModalOpen}
          setVisible={setIsaddModalOpen}
        />

        <DeleteIpAddress
          title="白名单"
          visible={isDeleteModalOpen}
          setVisible={setIsDeleteModalOpen}
          recordId={recordId}
          total={total}
          page={page}
          pageSize={pageSize}
          setPage={setPage}
        />
      </div>
    </>
  );
}
